<template>
  <div id="tableinfo" style=" width: 469px;
  height: 260px;">
    <div class="table-wrap" style="background-color: rgba(107, 107, 107, 0.5);">
      <div class="table-head" style="font-size: 12px;
  color: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transition: .3s;
  line-height: initial;
  cursor: pointer;
  border: none;
  text-align: center;">
        <div style="width: 10%;
  padding-left: 0px;">序号</div>
        <div style="width: 20%;">对象名称</div>
        <div style="width: 10%;">等级</div>
        <div style="width: 10%;">内容</div>
        <div style="width: 100px;
  padding: 10px;
  padding-right: 40px;">时间</div>
      </div>
      <div class="table-body">
        <el-collapse accordion>
            <el-collapse-item v-for="item in tableData" :key="item.id">
              <template slot="title">
                <div style="width: 10%;
  padding-left: 0px;">{{ item.id }}</div>
                <div style="width: 20%;">{{ item.name }}</div>
                <div style="width: 10%;">{{ item.level }}</div>
                <div style="width: 10%;">{{ item.content }}</div>
                <div style="width: 100px;
  padding: 10px;
  padding-right: 40px;">{{ item.time }}</div>
              </template>
              <div class="detail-info" style="width: 100%;
  height: 167px;  
  background-color: #909fa5ea;
  overflow: hidden;
  display: flex;
  justify-content: space-around;">
                <div class="detail-info-left" style="display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  flex: 2;
  color: #fff;">
                  <div class="info-icon" style="width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid silver;
  display: flex;
  justify-content: center;
  align-items: center;">
                    <img :src="item.detail_info.avatar" style="margin-top: 0px;
  width: 100%;">
                  </div>
                  <div class="name" style=" padding: 1px 0px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  border-radius: 14px;
  color: #fff;
  font-weight: initial;
  background-color: rgba(255, 255, 255, 0.315);
  text-align: center;">{{item.detail_info.name}}</div>
                  <div class="workid">工号 : {{item.detail_info.word_id}}</div>
                  <div class="tel">电话 : {{item.detail_info.tel}}</div>
                </div>   
                <div class="detail-info-right" style="flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  color: silver;">
                    <div style=" margin-top: 2px;
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 3px;
    width: 80%;
    border-bottom: 1px solid silver;
    color: #fff;"><span style="color: rgb(206, 206, 206);
    margin-right: 25px;">工单类型</span> {{item.detail_info.work_type}}</div>
                    <div style=" margin-top: 2px;
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 3px;
    width: 80%;
    border-bottom: 1px solid silver;
    color: #fff;"><span style="color: rgb(206, 206, 206);
    margin-right: 25px;">所属专业</span> {{item.detail_info.belong_profession}}</div>
                    <div style=" margin-top: 2px;
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 3px;
    width: 80%;
    border-bottom: 1px solid silver;
    color: #fff;"><span style="color: rgb(206, 206, 206);
    margin-right: 25px;">工单状态</span> {{item.detail_info.work_status}}</div>
                    <div style=" margin-top: 2px;
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 3px;
    width: 80%;
    border-bottom: 1px solid silver;
    color: #fff;"><span style="color: rgb(206, 206, 206);
    margin-right: 25px;">工单内容</span> {{item.detail_info.work_content}}</div>
                    <div style=" margin-top: 2px;
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 3px;
    width: 80%;
    border-bottom: 1px solid silver;
    color: #fff;"><span style="color: rgb(206, 206, 206);
    margin-right: 25px;">开始时间</span> {{item.detail_info.start_time}}</div>
                    <div style=" margin-top: 2px;
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 3px;
    width: 80%;
    border-bottom: 1px solid silver;
    color: #fff;"><span style="color: rgb(206, 206, 206);
    margin-right: 25px;">结束时间</span> {{item.detail_info.end_time}}</div>
                </div>   
              </div>
            </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        tableData: [
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
          {
            id: '000',
            name: '昌平变电站',
            level: '隐患',
            content: '故障',
            time: '20200210-09:00',
            detail_info: { //人员详细信息
              avatar: '../../../static/img/01/头像-1.png', //头像
              name: '张三', //姓名
              work_id: '1569', //工号
              tel: '18702158976', //电话
              work_type: '正常', //工单类型
              belong_profession: '电力', //所属专业
              work_status: '紧急', //工单状态
              work_content: '003号变电站故障', //工单内容
              start_time: '2020-07-30 17:23', //开始时间
              end_time: '2020-07-30 18:40', //结束时间
            }
          },
        ]
      }
    },
    methods: {

    },
}
</script>

<style scoped>
/*
#tableinfo{
  width: 469px;
  height: 260px;
}
.table-wrap{
  background-color: rgba(107, 107, 107, 0.5);
}
.table-head{
  font-size: 12px;
  color: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transition: .3s;
  line-height: initial;
  cursor: pointer;
  border: none;
  text-align: center;
}

/* 向右箭头 */
.el-collapse >>> .el-icon-arrow-right{
  display: none;
}


.table-body >>> .el-collapse > .el-collapse-item{
  width: 100%;
}

.table-body >>> .el-collapse{
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
  border: none;
}
/* 隐藏滚动条 */
.table-body >>> .el-collapse::-webkit-scrollbar{
  width: 0px;
  /* position: absolute; */
  /* background-color: red; */

}
.table-body >>> .el-collapse-item .el-collapse-item__wrap{
  border: none;
}
/* 奇数行颜色 */
.table-body >>> .el-collapse .el-collapse-item:nth-child(odd) .el-collapse-item__header{
  background-color: #879a9bcc;
}
/* 偶数行颜色 */
.table-body >>> .el-collapse .el-collapse-item:nth-child(even) .el-collapse-item__header{
  background-color: #93a4a594;
}
.el-collapse >>> .el-collapse-item__header{
  font-size: 13px;
  color: silver;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transition: 0.3s;
  line-height: initial;
  height: 30px;
  cursor: pointer;
  border: none;
  text-align: center;
}
/* 鼠标划入样式 */
.table-body >>> .el-collapse .el-collapse-item .el-collapse-item__header:hover{
  color: #fff;
  background-color: rgb(121, 184, 138);
}
/* 每列设置适应的宽度 */
/*
.table-head > div:nth-child(1),
.el-collapse-item__header > div:nth-child(1){
  width: 10%;
  padding-left: 0px;
}
.table-head > div:nth-child(2),
.table-body >>> .el-collapse .el-collapse-item .el-collapse-item__header > div:nth-child(2){
  width: 20%;
}
.table-head > div:nth-child(3),
.table-head > div:nth-child(4),
.table-body >>> .el-collapse .el-collapse-item .el-collapse-item__header > div:nth-child(3),
.table-body >>> .el-collapse .el-collapse-item .el-collapse-item__header > div:nth-child(4){
  width: 10%;
}
.table-head > div:nth-child(5),
.table-body >>> .el-collapse .el-collapse-item .el-collapse-item__header > div:nth-child(5){
  width: 100px;
  padding: 10px;
  padding-right: 40px;
}
*/

/* 详细信息面板 */
.table-body >>> .el-collapse .el-collapse-item .el-collapse-item__content{
  padding-bottom: 0;
}
/*
.detail-info{
  width: 100%;
  height: 167px;  
  background-color: #909fa5ea;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
}

.detail-info .detail-info-left{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  flex: 2;
  color: #fff;
.detail-info-left .info-icon{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid silver;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail-info-left .info-icon img{
  margin-top: 0px;
  width: 100%;
}
.detail-info-left .name{
  padding: 1px 0px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  border-radius: 14px;
  color: #fff;
  font-weight: initial;
  background-color: rgba(255, 255, 255, 0.315);
  text-align: center;
}
.detail-info .detail-info-right{
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  color: silver;
}
.detail-info-right div{
    margin-top: 2px;
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 3px;
    width: 80%;
    border-bottom: 1px solid silver;
    color: #fff;
}
.detail-info-right div:last-child{
    border: none;
}
.detail-info-right div span{
    color: rgb(206, 206, 206);
    margin-right: 25px;
}
*/
</style>

